import React, { Component } from 'react'
import { Breadcrumb, message, Table } from 'antd'
import {Link} from 'react-router-dom'

import Request from '@utils/request'
import {fileUrl} from '@config/url'

import {
    HomeOutlined,
    FolderFilled
} from '@ant-design/icons'
  


export default class ListFiles extends Component {
  state = {
    columns: [
      {
        title: '文件名',
        dataIndex: 'filename',
        render: (text, record, index) => {
          if (record.isDir) 
            return <a href="/tmp"><FolderFilled style={{fontSize:20, marginRight:5}}/>{text}</a>
          return <a href="/tmp">{text}</a>
        }
      },
      {
        title: '大小',
        dataIndex: 'size',
      },
      {
        title: '修改日期',
        dataIndex: 'updatetime',
      },
    ],
    
    data: [
      {
        filename: 'iconfont',
        size: '3.1KB',
        updatetime: '2021-10-15 13:31',
        isDir: true,
      },
      {
        filename: '测试',
        size: '0B',
        updatetime: '2021-10-16 13:31',
        isDir: true,
      },
      {
        filename: '计算机统计.xlsx',
        size: '12.2KB',
        updatetime: '2021-10-15 14:31',
        isDir: false,
      },
    ]
  }

  
  // rowSelection object indicates the need for row selection
  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  }

  // onRow = {
  //     // 单击行
  //     onClick: event => {
  //       console.log('单击行', event)
  //     }, 
  //     // 双击行
  //     onDoubleClick: event => {},
  //     // 鼠标右击行
  //     onContextMenu: event => {
  //       console.log('鼠标右击行', event)
  //     },
  //     // 鼠标移入行
  //     onMouseEnter: event => {
  //       console.log('鼠标移入行', event)
  //     },
  //     // 鼠标移出行 
  //     onMouseLeave: event => {},
  // }

  authFailedCallback = res => {
    const {history} = this.props
    const {status, statusText} = res
    console.log(res)
    if (status === 401) {
      message.warning("授权失败，即将跳转到登录界面 .....")
      history.push('/user/login')
    } else {
      message.error("请求错误:", statusText)
    }
  }

  get = async () => {
    const pageData = {
      fid: '/',
      page: 0,
      pageSize: 200,
      uid: '123'
    }
    const data = await Request(fileUrl.page, pageData, 'GET')
  }

  componentDidMount() {
    this.get()
  }

  render() {
    return (
      <div>
        <Breadcrumb>
          <Breadcrumb.Item>
            <HomeOutlined />
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/home/files">全部文件</Link>
          </Breadcrumb.Item>
        </Breadcrumb>
        {/* <Table
          rowSelection={{ ...this.rowSelection }}
          // onRow={record => this.onRow}
          columns={this.state.columns}
          dataSource={this.state.data}
        /> */}
      </div>
    )
  }
}